<template>
  <demoBlock title="全选与反选" padding class="demo-checkbox">
    <vcu-checkbox-group v-model="checked" ref="checkboxGroup">
      <vcu-checkbox name="a">复选框 a</vcu-checkbox>
      <vcu-checkbox name="b">复选框 b</vcu-checkbox>
      <vcu-checkbox name="c">复选框 c</vcu-checkbox>
      <vcu-checkbox name="d">复选框 d</vcu-checkbox>
    </vcu-checkbox-group>
    <vcu-button type="primary" size="small" @click="checkAll" class="mr-10">全选</vcu-button>
    <vcu-button type="primary" size="small" @click="toggleAll">反选</vcu-button>
  </demoBlock>
</template>

<script>
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const checked = ref([]);
    const checkboxGroup = ref(null);
    const checkAll = () => {
      checkboxGroup.value.toggleAll(true);
    };
    const toggleAll = () => {
      checkboxGroup.value.toggleAll();
    };
    return {
      checked,
      checkAll,
      toggleAll,
      checkboxGroup
    };
  },
});
</script>
<style lang="less" scoped>
.demo-checkbox {
  .vcu-checkbox {
    margin-bottom: 10px;
  }
}
</style>
